/**
 * 品牌页背景地图组件
 */
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import $ from 'jquery'

let main = ref()

let myChart = null

function init() {
  $.get('/geojson/world.json', function (worldJson) {
    echarts.registerMap('world', worldJson)

    myChart = echarts.init(main.value)

    let option = {
      geo: {
        map: 'world',
        center: [108, 21],
        itemStyle: {
          areaColor: '#252558',
          borderColor: '#666',
        },
        zoom: 2.8
      }
    }

    myChart.setOption(option)
  })
}

function myChartResize() {
  if (myChart) {
    myChart.resize()
  }
}

onMounted(() => {
  init()

  window.addEventListener('resize', myChartResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', myChartResize)
})
</script>

<template>
  <div id="brand-geo" ref="main"></div>
</template>

<style lang="scss" scoped>
#brand-geo {
  width: 100%;
  height: 100%;
  background-color: #12161b;
}
</style>